<template>
	<view class="cahat-box">
		<!-- <u-navbar :is-back="false" title="" v-if="1" :border-bottom="false"></u-navbar> -->
		<view class="tab-list flex justify-center u-border-bottom mt44">

			<view class="w400 ">
				<u-tabs :list="listTab" active-color="#020002" height="110" :bar-style="style" gutter="40"
					item-width="300" :is-scroll="false" :current="currentIndex" @change="change">
				</u-tabs>
			</view>
		</view>

		<view class="cahat-center">
			<view class="">
				<u-search placeholder="搜索昵称/聊天记录" :show-action="false" v-model="keyword"></u-search>
			</view>


			<view class="center-box pt10" v-if="currentIndex == 0">
				<u-swipe-action :show="item.show" :index="index" v-for="(item, index) in listFrom" :key="item.id"
					@click="click" @open="open" :options="options" style="width: 100%;">
					<view class="item align-center">
						<image mode="" :src="item.headImg" class="" />
						<view class="" @click="catchList(item)">
							<view class="" style="font-weight: 600;">
								{{item.nickName}}
							</view>
							<view class="mt20 f24" style="width: 80%;
								text-overflow:ellipsis;
								white-space:nowrap;
								overflow: hidden;
								color: #666;">
								1
								<!-- {{ item.title }} -->
							</view>
						</view>
					</view>
				</u-swipe-action>
			</view>

			<view class="center-box pt10" v-if="currentIndex == 1">

				<view class="item align-center flex align-center justify-between" v-for="(item, index) in groupListFrom" :key="item.id">
					<view class="flex" @click="l.to('/pages/home/gropList?gropName=' + item.groupName)">
						<image mode="" :src="item.groupImg" class="" />
						<view class="">
							<view class="" style="font-weight: 600;">
								{{item.groupName}}
							</view>
							<view class="mt20 f24" style="width: 80%;
									text-overflow:ellipsis;
									white-space:nowrap;
									overflow: hidden;
									color: #666;">
								<!-- {{ item.title }} -->
								1
							</view>
						</view>
					</view>
					
					<!-- <view class="w96 h48 lh48 text-center r10 f26" style="background-color: #F7F7F7; color: #242424;">
						加入
					</view> -->
				</view>
			</view>
		</view>
		<!-- <lemon-imui ref="IMUI" /> -->
		<u-tabbar active-color="#000000" inactive-color="#999999" icon-size="48" height="110" @change="changePages"
			v-model="current" :list="list" ></u-tabbar>
		<yy-tip :isCustom="false" />

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	// import TIM from 'tim-js-sdk';
	export default {
		data() {
			return {
				list: [
					{
						iconPath: '../../static/tab/home.png',
						selectedIconPath: '../../static/tab/home-sele.png',
						text: '广场',
						customIcon: false,
						pagePath: '/pages/tab/index'
					},
					// {
					// 	iconPath: '../../static/tab/1v1.png',
					// 	selectedIconPath: '../../static/tab/1v1-sele.png',
					// 	text: '1v1',
					// 	customIcon: false,
					// 	pagePath: '/pages/tab/covey'
					// },
					// {
					// 	iconPath: '../../static/tab/good.png',
					// 	selectedIconPath: '../../static/tab/good.png',
					// 	text: '推荐',
					// 	midButton: true,
					// 	customIcon: false,
					// 	pagePath: '/pages/tab/recommend'
					// },
					{
						iconPath: '../../static/tab/tuij.png',
						selectedIconPath: '../../static/tab/tuij-sele.png',
						text: '推荐',
						customIcon: false,
						pagePath: '/pages/tab/recommend'
					},
					{
						iconPath: '../../static/tab/chat.png',
						selectedIconPath: '../../static/tab/chat-sele.png',
						text: '聊天',
						customIcon: false,
						pagePath: '/pages/tab/chat'
					},
					{
						iconPath: '../../static/tab/me.png',
						selectedIconPath: '../../static/tab/me-sele.png',
						text: '我的',
						isDot: false,
						customIcon: false,
						pagePath: '/pages/tab/me'
					}
				],
				current: 0,
				listTab: [{
					name: '聊天'
				}, {
					name: '群聊'
				}],
				style: {
					marginLeft: 15 + 'rpx',
					height: 8 + 'rpx',
					width: 8 + 'rpx',
					borderRadius: 4 + 'rpx',
					backgroundColor: '#000000',
				},
				currentIndex: 0,
				keyword: '',
				listFrom: [{
						id: 1,
						title: '长安回望绣成堆，山顶千门次第开，',
						images: '../../static/img.jpg',
						show: false
					},
					{
						id: 2,
						title: '新丰绿树起黄埃，数骑渔阳探使回，',
						images: '../../static/img.jpg',
						show: false
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃。',
						images: '../../static/img.jpg',
						show: false,
					}
				],
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				groupListFrom:'',
			};
		},
		computed: {
			...mapState({
				isLogin: state => state.isLogin,
				isSDKReady: state => state.isSDKReady,
				conversationList: state => state.conversationList,
			})
		},
		onShow() {
			if (this.isSDKReady) {
				console.log('2222')
				this.getConversationList()
			} else {
				console.log('333333')
			}
		},
		onLoad(e) {
			this.getUserList()
			this.userUnfo = uni.getStorageSync('userInfo')
		},
		watch: {
			currentIndex(newValue, oldValue) {
				this.groupLisr()
			},
			isSDKReady(val) {
				//isSDKReady == true 
				if (val) {
					//更新用户自己的基础资料（头像+昵称+个性签名）
					this.updateUserInfo()
					console.log('000000000==>', '000000000');
					//请求会话列表
					this.getConversationList()
				}
			},
		},
		methods: {
			updateUserInfo() {
				//将已经登陆的用户信息 提交到IM中
				let userInfo = uni.getStorageSync('userInfo')
				let promise = this.tim.updateMyProfile({
					nick: userInfo.nickName,
					avatar: userInfo.headImg,
					gender: this.$TIM.TYPES.GENDER_MALE,
					selfSignature: '暂无个性签名',
					allowType: this.$TIM.TYPES.ALLOW_TYPE_ALLOW_ANY
				});
				promise.then((res) => {
					console.log('提交资料成功',res)
				}).catch((err) => {
					console.warn('updateMyProfile error:', err); // 更新资料失败的相关信息
				});
			},
			//获取消息列表
			getConversationList() {
				// 拉取会话列表
				let promise = this.tim.getConversationList();
				promise.then((res) => {
					let conversationList = res.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
					if (conversationList.length) {
			
						//将返回的会话列表拼接上 用户的基本资料  
						//说明：如果已经将用户信息 提交到tim服务端了 就不需要再次拼接
						this.$store.commit("updateConversationList", conversationList);
					}
				}).catch((err) => {
					console.warn('getConversationList error:', err); // 获取会话列表失败的相关信息
				});
			},
			async groupLisr() {
				const res = await this.$u.get('api/user/group/list')
				this.groupListFrom = res.data
			},
			changePages(e, index) {
				console.log('e==>', e, index);
				// if (e == 0) {
				// 	this.l.to('/pages/tab/index')
				// } else if (e == 1) {
				// 	this.l.to('/pages/tab/covey')
				// } else if (e == 2) {
				// 	this.l.to('/pages/tab/recommend')
				// } else if (e == 3) {
				// 	this.l.to('/pages/tab/chat')
				// } else {
				// 	this.l.to('/pages/tab/me')
				// }
				
				if (e == 0) {
					this.l.to('/pages/tab/index');
				} else if (e == 1) {
					this.l.to('/pages/tab/recommend');
				} else if (e == 2) {
					this.l.to('/pages/tab/chat');
				} else if (e == 3) {
					this.l.to('/pages/tab/me');
				} 
			},

			change(index) {
				this.currentIndex = index
			},

			click(index, index1) {
				if (index1 == 1) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个cell`);
				} else {
					this.list[index].show = false;
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
				console.log('1==>', 1);
			},
			
			catchList(item) {
				this.$store.commit('updateConversationActive', item)
				this.$store.commit('createConversationActive', item)
				this.l.to('/pages/home/private')
			},
			
			async getUserList () {
				let res = await this.$u.get('api/follow/meFollow', {
					})
				this.listFrom = res.data
				if (res.code == 200) {
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.cahat-box {

		.tab-list {}

		.cahat-center {
			padding: 20rpx 30rpx;

			.center-box {

				.item {
					width: 100%;
					height: 140rpx;
					display: flex;
					padding: 20rpx 0;
					margin-bottom: 20rpx;
				}

				image {
					width: 76rpx;
					height: 76rpx;
					margin-right: 20rpx;
					border-radius: 38rpx;
				}

				// .title {
				// 	text-align: left;
				// 	font-size: 28rpx;
				// 	color: $u-content-color;
				// 	margin-top: 20rpx;
				// }
			}
		}
	}
</style>
